<template>
    <div class="list-view-table">
        <div class="json-table-view">
            <el-table ref="jsonTable" v-loading="loading" :data="tableData" :border="border" :stripe="stripe"
                :show-header="showHeader" :height="tableHeight" :row-key="rowKey" style="width: 100%;"
                @selection-change="handleSelectionChange">

                <el-table-column v-if="tableType === 'expand'" type="expand" align="center" header-align="center"
                    width="50">
                    <template slot-scope="scope">
                        <slot name="tableType" :rowData="{ scope }" />
                    </template>
                </el-table-column>

                <el-table-column v-else-if="tableType !== 'none'" :type="canCatchDel ? tableType : 'index'"
                    :fixed="tableType === 'selection' && canCatchDel ? 'left' : ''"
                    :label="tableType === 'index' || !canCatchDel ? '#' : ''" align="center" header-align="center"
                    width="50" />

                <el-table-column v-for="(col, index) in tableHeads" :key="index" :align="col.align || 'center'"
                    :header-align="col.headerAlign || 'center'" :prop="col.prop" :fixed="col.fixed" :label="col.label"
                    :width="col.width || ''" :show-overflow-tooltip="col.overflowTooltip === 'show'"
                    :min-width="col.minWidth || ''">

                    <template slot-scope="scope">
                        <slot v-if="col.slot" :name="col.prop" :rowData="{ scope }" />
                        <a v-else-if="col.dataType == 'textlink'" class="textlinkClass"
                            @click="doClickLink(scope.row, scope)">{{
                                scope.row[col.prop] }}</a>

                        <template v-else-if="col.dataType == 'image'">
                            <template v-if="col.imageConfig">
                                <el-image
                                    :style="{ height: (col.imageConfig.height ? col.imageConfig.height : '70px'), width: (col.imageConfig.width ? col.imageConfig.width : '70px') }"
                                    :src="scope.row[col.prop]" :preview-src-list="srcList(scope.row[col.prop])">
                                </el-image>
                            </template>

                            <template v-else>
                                <el-image style="width: 70px; height: 70px;" :src="scope.row[col.prop]"
                                    :preview-src-list="srcList(scope.row[col.prop])">
                                </el-image>
                            </template>
                        </template>
                        <!-- :status="col.progressConfig.status ? col.progressConfig.status : ''" -->
                        <template v-else-if="col.dataType == 'progress'">
                            <template v-if="col.progressConfig">
                                <el-progress type="circle" :percentage="scope.row[col.prop]"
                                    :type="col.progressConfig.type ? col.progressConfig.type : 'circle'"
                                    :color="col.progressConfig.color ? col.progressConfig.color : ''"
                                    :width="col.progressConfig.width ? col.progressConfig.width : 50"></el-progress>
                            </template>
                            <template v-else>
                                <el-progress type="circle" :percentage="scope.row[col.prop]" width="55"></el-progress>
                            </template>

                        </template>
                        <template v-else-if="col.dataType == 'number'">

                            <template v-if="col.numberConfig">
                                <span v-if="col.numberConfig.formatNumber" :style="col.numberConfig.numberStyle">
                                    {{ formatNumber(scope.row[col.prop]) }}</span>
                                <span :style="col.numberConfig.numberStyle" v-else>{{
                                    col.numberConfig.decimals ? scope.row[col.prop].toFixed(col.numberConfig.decimals) :
                                    scope.row[col.prop]
                                }}</span>
                            </template>
                            <template v-else>
                                {{ scope.row[col.prop] }}
                            </template>

                            <template v-if="col.unitConfig">
                                <span :style="col.unitConfig.unitStyle">
                                    {{ col.unitConfig.unit }}
                                </span>
                            </template>
                        </template>

                        <template v-else-if="col.dataType == 'date'">
                            {{ scope.row[col.prop] | formatDate(col.dateFormat) }}
                        </template>
                        <template v-else-if="col.dataType == 'enum'">
                            {{ scope.row[col.prop] | formatEnum(col.enumList) }}
                        </template>
                        <template v-else-if="col.dataType === 'textarea'" class="textarea">
                            <template v-if="col.textareaConfig">
                                <el-popover
                                    :placement="col.textareaConfig.placement ? col.textareaConfig.placement : 'left'"
                                    :width="col.textareaConfig.width ? col.textareaConfig.width : 200"
                                    :trigger="col.textareaConfig.interactiveStyle ? col.textareaConfig.interactiveStyle : 'hover'"
                                    :content="scope.row[col.prop]" v-if="col.textareaConfig.ifPopoverShow">
                                    <div slot="reference" class="textarea"
                                        :style="{ '-webkit-line-clamp': col.textareaConfig.showLine }">
                                        {{ scope.row[col.prop] }}
                                    </div>
                                </el-popover>
                            </template>

                            <template v-else>
                                {{ scope.row[col.prop] }}
                            </template>
                            
                        </template>
                        <span v-else>{{ scope.row[col.prop] }}</span>
                    </template>

                </el-table-column>

            </el-table>
        </div>
        <div v-if="page !== null" class="page"> 
            <el-pagination  :current-page.sync="page.current" :page-size="page.limit"  background
                :total="page.total" layout="total,sizes,prev, pager, next,  slot, jumper" @current-change="onCurrentPageChange" :page-sizes="[10, 20, 30, 40]">
                <!-- <span class="common-pagination__total-pages">共 <a></a>{{ totalPages }}页</span> -->
            </el-pagination>
        </div>
    </div>
</template>

<script>
import store from '@/store'

export default {
    name: 'JsonTable',
    props: {
        // 斑马线
        stripe: {
            type: Boolean,
            default: false
        },
        // 边框
        border: {
            type: Boolean,
            default: true
        },
        // 是否显示表头
        showHeader: {
            type: Boolean,
            default: true
        },

        // 表格第一列类型：
        // 1、selection：多选；
        // 2、expand：展开行；
        // 3、index：序号（default）
        // 4、none：什么也没有
        tableType: {
            type: String,
            default: 'index'
        },
        // 表格多选的时候用到，即按钮的权限编号
        selectionCode: {
            type: String
        },
        // 表格多选的时候必填，一般都是批量删除所需的主键
        rowKey: {
            type: String,
            default: null
        },

        selectionButtonType: {
            type: String,
            default: 'danger'
        },
        // 表格列值配置列表，item 字段有：{ slot,prop,label,width,min-width,align(default center),header-align(default center),fixed }
        // 一般地最后一列fixed:'right'；表格多选的时候第一列fixed:'left'，操作列fixed:'right'。
        //dataType  text textlink image progress  number enum date
        tableHeads: {
            type: Array
        },
        tableData: {
            type: Array
        },
        // 分页信息: { current, limit, total }
        page: {
            type: Object,
            default: null
        },
        // 加载
        loading: {
            type: Boolean,
            default: false
        },
        formatNumber: {
            type: Function,
            default: null
        }


    },
    data() {
        return {
            tableHeight: 0,

            // 多选时候的相关数据
            selections: []
        }
    },
    filters: {
        //格式化枚举
        formatEnum(value, enumList) {
            let str = '未知';
            enumList.forEach(p => {

                if (p.value == value) {
                    str = p.label;
                }
            })
            return str;

        },

        formatDate(date, formatStr) {
            if (date === null) { return '' }
            date = new Date(date);
            let str = formatStr;
            let Week = ['日', '一', '二', '三', '四', '五', '六'];
            str = str.replace(/yyyy|YYYY/, date.getFullYear());
            str = str.replace(/yy|YY/, (date.getYear() % 100) > 9 ? (date.getYear() % 100).toString() : '0' + (date.getYear() % 100));
            str = str.replace(/MM/, (date.getMonth() + 1) > 9 ? (date.getMonth() + 1).toString() : '0' + (date.getMonth() + 1));
            str = str.replace(/M/g, date.getMonth() + 1);
            str = str.replace(/w|W/g, Week[date.getDay()]);
            str = str.replace(/dd|DD/, date.getDate() > 9 ? date.getDate().toString() : '0' + date.getDate());
            str = str.replace(/d|D/g, date.getDate());
            str = str.replace(/hh|HH/, date.getHours() > 9 ? date.getHours().toString() : '0' + date.getHours());
            str = str.replace(/h|H/g, date.getHours());
            str = str.replace(/mm/, date.getMinutes() > 9 ? date.getMinutes().toString() : '0' + date.getMinutes());
            str = str.replace(/m/g, date.getMinutes());
            str = str.replace(/ss|SS/, date.getSeconds() > 9 ? date.getSeconds().toString() : '0' + date.getSeconds())
            str = str.replace(/s|S/g, date.getSeconds())
            return str
        }
    },
    computed: {

        totalPages() {
            return this.page ? Math.ceil(this.page.total / this.page.limit) : 0
        },
        // 获取权限是否可以显示批量删除按钮
        canCatchDel() {
            return true
        }
    },

    watch: {
        tableHeight(val) {
            this.tableHeight = window.innerHeight - this.$refs.jsonTable.$el.offsetTop - 102
            // 监听窗口大小变化
            const self = this
            window.onresize = function () {
                self.tableHeight = window.innerHeight - self.$refs.jsonTable.$el.offsetTop - 102
            }
        },
        tableData(val) {
            try {
                this.$refs.jsonTable.doLayout()
            } catch (e) { }
        }
    },
    mounted() {

        this.$nextTick(function () {
            this.tableHeight = window.innerHeight - this.$refs.jsonTable.$el.offsetTop - 102
            // 监听窗口大小变化
            const self = this
            window.onresize = function () {
                self.tableHeight = window.innerHeight - self.$refs.jsonTable.$el.offsetTop - 102
            }
        })
        // this.$refs.table.$el.offsetTop：表格距离浏览器的高度
    },
    methods: {
        //link的点击事件
        doClickLink(e, scope) {
            this.$emit("clickLink", e, scope.column.property)
        },
        //预览图片
        srcList(url) {
            let arr = []
            arr.push(url)
            return arr
        },
        // 换页的事件
        onCurrentPageChange(e) {
            this.$emit('current-change', e)
        },

        // 多选时候的相关方法
        handleSelectionChange(val) {
            this.$emit('selection-do', val)
        },
        cancelSelection() {
            this.$refs.jsonTable.clearSelection()
            this.selections = []
        },
    }
}
</script>

<style lang="scss" scoped>
.list-view-table {
    flex: 1;
    display: flex;
    flex-direction: column;

    .json-table-view {
        flex: 1;
        padding: 0 10px;
        box-sizing: border-box;
    }

    .page {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        height: 40px;
        justify-content: center;

        .common-pagination__total-pages {
            margin-left: 18px;
            color: #797979;
        }
    }
}
</style>
<style scoped>
>>>.el-pagination__total {
    margin-left: 18px;
}

.textlinkClass {
    color: #409EFF;
    border-bottom: 1px solid #409EFF;
    margin-bottom: 20px;
}

.textarea {
    display: -webkit-box;
    overflow: hidden;
    /* 将元素设为一个弹性伸缩盒子 */
    -webkit-box-orient: vertical;
    /* 设定元素为垂直方向 */

    /* 隐藏超出部分 */
    text-overflow: ellipsis;
    /* 超出部分用省略号(...)表示 */
}
</style>
